<template>
  <el-dialog
    title="编辑角色"
    :visible.sync="status"
    width="40%"
    :before-close="handleClose"
  >
    <qf-form
      v-if="status"
      :row="row"
      :width="80"
      :formItem="formItem"
      :formBtns="formBtns"
    ></qf-form>
  </el-dialog>
</template>

<script>
import { putRoleApi } from "@/api/role";

export default {
  props: {
    handleTableData: {
      type: Function,
      required: true,
    },
  },
  methods: {
    handleClose(done) {
      done();
    },
  },
  data() {
    return {
      status: false,
      row: {},

      // 表单配置
      formItem: [
        // ...
        {
          label: "角色名称",
          rules: [
            { required: true, message: "角色名称必须", trigger: "blur" },
            { min: 2, max: 6, message: "至少2~6个字符", trigger: "blur" },
          ],

          field: "role_name",

          placeholder: "请输入角色名称",
          type: "input",
        },
        {
          label: "角色描述",
          rules: [
            { required: true, message: "角色描述必须", trigger: "blur" },
            { min: 2, max: 12, message: "至少2~12个字符", trigger: "blur" },
          ],

          field: "role_describe",

          placeholder: "请输入角色描述",
          type: "input",
        },
        // ...
      ],
      // 表单按钮组
      formBtns: [
        {
          content: "更新",
          type: "primary",
          click: async (formData) => {
            console.log("表单数据", formData);
            const res = await putRoleApi(formData);
            if (res.meta.state === 200) {
              this.$message.success(res.meta.msg);
              this.status = false;
              this.handleTableData();
            } else {
              this.$message.error(res.meta.msg);
            }
          },
        },
        {
          content: "重置",
          type: "",
        },
      ],
    };
  },
};
</script>

<style></style>
